<style scoped>
    .content-box {
        height: 100%;
        background: #ffffff;
        position: relative;
    }

    .top {
        height: 65px;
        background: #eaedf1;
        border-top: 1px solid #bbbbbb;
        border-bottom: 1px solid #bbbbbb;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-size: 18px;
        color: #3bc1a6;
        line-height: 70px;
        padding-right: 30px;
        text-align: right;
    }

    .content {
        position: absolute;
        left: 0;
        top: 65px;
        right: 0;
        bottom: 0;
        overflow: auto;
        padding: 10px 20px 30px 20px;
    }

    .reason {
        border: 1px solid #bbbbbb;
        color: #f35e58;
        display: flex;
        align-items: flex-start;
        padding: 10px 10px 30px 10px;
        margin-bottom: 10px;
    }

    .table {
        border: 1px solid #bbbbbb;
        width: 100%;
    }

    .table td {
        border: 1px solid #bbbbbb;
        line-height: 50px;
        background: #f5f5f5;
        text-align: center;
    }

    .table .table__cell--caption {
        font-size: 16px;
    }

    .table .table__cell--value {
        background: #FFFFFF;
    }

    .block {
        width: 48%;
        margin-top: 50px;
        border: 1px solid #bbbbbb;
        float: left;
    }

    .block--last {
        float: right;
    }

    .block__title {
        border-bottom: 1px solid #bbbbbb;
        font-size: 26px;
        /*font-weight: bold;*/
        line-height: 50px;
        text-align: center;
        background: #eaedf1;
    }

    .block__context {
        display: flex;
        justify-content: space-between;
    }

    .block__context--text {
        height: 120px;
        padding: 10px;
    }

    .img-box {
        width: 50%;
        height: 270px;
    }

    .dialog__title {
        font-size: 24px;
        line-height: 54px;
        text-align: center;
    }


</style>
<template>
    <div class="content-box">
        <div class="top">
            <el-button type="danger" size="small" @click="sure" v-if="vo.mode=='audit'">通过</el-button>
            <el-button type="primary" size="small" @click="showReject" v-if="vo.mode=='audit'">拒绝</el-button>
            <el-button size="small" @click="back" icon="el-icon-arrow-left">返回</el-button>
        </div>
        <div class="content" v-if="vo.enterInfo._id">
            <div v-if="vo.enterInfo.auditStatus==-1" class="reason">
                <div>拒绝理由：</div>
                <div>{{vo.enterInfo.auditRejectReason}}</div>
            </div>
            <div v-if="vo.enterInfo.freezeStatus==1" class="reason">
                <div>冻结原因：</div>
                <div>{{vo.enterInfo.freezeReason}}</div>
            </div>
            <table class="table">
                <tr>
                    <td width="230" rowspan="5" class="table__cell--value">
                        <img :src="vo.enterInfo.portrait" alt="">
                    </td>
                    <td width="180" class="table__cell--caption">名称</td>
                    <td width="260" class="table__cell--value">{{vo.enterInfo.name}}</td>
                    <td width="180" class="table__cell--caption">擅长领域</td>
                    <td width="260" class="table__cell--value">{{vo.enterInfo.specialityText}}</td>
                </tr>
                <tr>
                    <td class="table__cell--caption">姓名</td>
                    <td class="table__cell--value">{{vo.enterInfo.operateName}}</td>
                    <td class="table__cell--caption">身份证号</td>
                    <td class="table__cell--value">{{vo.enterInfo.idcard}}</td>
                </tr>
                <tr>
                    <td class="table__cell--caption">邮箱</td>
                    <td class="table__cell--value">{{vo.enterInfo.concatEmail}}</td>
                    <td class="table__cell--caption">出生年月</td>
                    <td class="table__cell--value">{{getDateString(vo.enterInfo.user.info.birthday)}}</td>
                </tr>
                <tr>
                    <td class="table__cell--caption">QQ</td>
                    <td class="table__cell--value">{{vo.enterInfo.concatQQ}}</td>
                    <td class="table__cell--caption">所在地</td>
                    <td class="table__cell--value">
                        {{vo.enterInfo.provinceName}}{{vo.enterInfo.cityName}}{{vo.enterInfo.areaName}}
                    </td>
                </tr>
                <tr>
                    <td class="table__cell--caption">手机号</td>
                    <td class="table__cell--value">{{vo.enterInfo.mobile}}</td>
                    <td class="table__cell--caption">申请时间</td>
                    <td class="table__cell--value">{{getDateTimeShort(vo.enterInfo.applyTime)}}</td>
                </tr>
            </table>
            <div>
                <div class="block">
                    <div class="block__title">个人、团队介绍</div>
                    <div class="block__context block__context--text">{{vo.enterInfo.introduce}}</div>
                </div>

                <div class="block block--last">
                    <div class="block__title">推广资源及渠道</div>
                    <div class="block__context block__context--text">{{vo.enterInfo.channel}}</div>
                </div>

                <div class="block">
                    <div class="block__title">身份证</div>
                    <div class="block__context">
                        <perview :src="vo.enterInfo.idcardFrontalImg" class="img-box">正面</perview>
                        <perview :src="vo.enterInfo.idcardBacklImg">背面</perview>
                    </div>
                </div>

                <div class="block block--last">
                    <div class="block__title">实力证明</div>
                    <div class="block__context">
                        <perview :src="vo.enterInfo.strength[0]" class="img-box">正面</perview>
                        <perview :src="vo.enterInfo.strength[1]">背面</perview>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog title="拒绝确认" :visible.sync="vo.showRejectDialog">
            <h2 class="dialog__title">确定要拒绝吗？</h2>
            <el-form ref="form" :model="po" label-width="100px"
                     :rules="{auditRejectReason: [{ required: true, message: '请填写拒绝理由', trigger: 'blur' }]}">
                <el-form-item label="拒绝理由" prop="auditRejectReason">
                    <el-input v-model="po.auditRejectReason" type="textarea" rows="3"></el-input>
                </el-form-item>
                <el-form-item label="是否发送消息">
                    <el-radio v-model="po.sendMessage" :label="true">是</el-radio>
                    <el-radio v-model="po.sendMessage" :label="false">否</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="vo.showRejectDialog=false">取 消</el-button>
                <el-button type="primary" @click="reject">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
    import perview from 'components/perview'
    import {getDateTimeString, getDateString} from 'utils'
    export default {
        data(){
            return {
                po: {
                    id: '',
                    auditStatus: -1,//0 待审核 1审核通过  -1审核未通过
                    auditRejectReason: '',//审核拒绝原因
                    sendMessage: true,//0不发生销
                },
                vo: {
                    mode: 'info',
                    enterInfo: {},
                    showRejectDialog: false
                }
            }
        },
        computed: {},
        methods: {
            getDateString,
            getDateTimeString,
            getDateTimeShort(time){
                return getDateTimeString(time).substring(0, 16)
            },
            sure(){
                this.$confirm('确定要审核通过吗?', '通过确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$post("/enter/audit", {id: this.po.id, auditStatus: 1}).then(data=> {
                        this.$router.back()
                    }).catch(err=> {
                        this.$message.error(err.message);
                    })
                }).catch(() => {
                });
            },
            showReject(){
                this.vo.showRejectDialog = true
                this.$nextTick(()=> {
                    this.$refs.form.resetFields()
                })

            },
            reject(){
                this.$refs.form.validate().then(valid=> {
                    if (valid) {
                        this.$post("/enter/audit", this.po).then(data=> {
                            this.$router.back()
                        }).catch(err=> {
                            this.$message.error(err.message);
                        })
                    }
                }).catch(()=> {
                })
            },
            back(){
                this.$router.back()
            }
        },
        mounted(){
            if (this.$route.path.indexOf('enterInfo') == -1) {
                this.vo.mode = 'audit'
            }


            let enterInfo = window.sessionStorage.getItem("enterInfo")
            if (!enterInfo) {
                this.$message("未找到入驻申请数据")
            }
            enterInfo = JSON.parse(enterInfo)
            this.po.id = enterInfo._id
            this.vo.enterInfo = enterInfo
            this.vo.enterInfo.specialityText = this.vo.enterInfo.speciality.map(item => {
                return item.name
            }).join("、")
        },
        components: {
            perview
        },
        filters: {}
    }
</script>